<template>
  <a-modal
    v-model:visible="visible"
    class="form-modal"
    fullscreen
    :closable="false"
    :esc-to-close="false"
    title-align="center"
    :body-style="{ padding: 0 }"
  >
    <div class="header">
      <div class="title">
        {{ (id ? '编辑' : '新增') + props.title }}
      </div>
      <a-menu
        @menu-item-click="changeMenu"
        class="menu"
        mode="horizontal"
        :selected-keys="menuKey"
      >
        <a-menu-item key="1"
          ><div class="menu-item">
            <span class="icon">①</span>基础设置
          </div></a-menu-item
        >
        <a-menu-item key="2"
          ><div class="menu-item">
            <span class="icon">②</span>表单设计
          </div></a-menu-item
        >
      </a-menu>
      <a-space>
        <!-- <a-button @click="save" type="primary">保存</a-button>
        <a-button @click="back" type="primary">取消</a-button> -->
      </a-space>
    </div>
    <div class="content">
      <div class="main">
        <div class="base" v-show="menuSelected === '1'">
          <div class="base-form">
            <slot name="base"></slot>
            <!-- <div class="btn">
              <a-button
                @click="next"
                style="margin-right: 50px; flex: 1"
                type="primary"
                >下一步</a-button
              >
              <a-button style="flex: 1" @click="back"> 取消 </a-button>
            </div> -->
          </div>
        </div>
        <div class="from" v-show="menuSelected === '2'">
          <RenderTemplate
            v-if="isShowRenderTemplate"
            @upshowData="upshowData"
            @sortshowData="sortshowData"
            :type="type"
            :data="template"
            :hierarchy="hierarchy"
          ></RenderTemplate>
          <slot name="template-design"></slot>
        </div>
      </div>
    </div>
    <template #footer>
      <div class="modal-footer">
        <a-space size="large" align="center">
          <a-button type="secondary" @click="back">取消</a-button>

          <a-button
            type="secondary"
            :disabled="+menuSelected <= 1"
            @click="onPrev"
          >
            <IconLeft />
            上一步
          </a-button>
          <a-button
            type="primary"
            v-show="isPreview ? +menuSelected !== 3 : +menuSelected !== 2"
            :disabled="+menuSelected >= 4"
            @click="onNext"
          >
            下一步
            <IconRight />
          </a-button>
          <a-button
            v-show="isPreview ? +menuSelected === 3 : +menuSelected === 2"
            type="primary"
            @click="save"
          >
            保存
          </a-button>
        </a-space>
      </div>
      <!-- <div class="btn">
        <a-button
          type="primary"
          style="margin-right: 50px; flex: 1"
          @click="save"
        >
          保存
        </a-button>
        <a-button style="flex: 1" @click="back"> 取消 </a-button>
      </div> -->
    </template>
  </a-modal>
</template>
<script setup lang="ts">
const props = withDefaults(
  // 参数说明
  defineProps<{
    baseInfo?: any;
    save?: any; // 新增传入函数
    back?: any; // 编辑传入函数
    template?: any; // 控件数据
    title?: string;
    id?: number; //是否编辑
    type?: 'editData' | 'editShow'; //editData---控件编辑  editShow---控件显示
    hierarchy?: number; // 层级
    refForm: any; //校验ref
    isPreview?: boolean; // 是否可以预览填写表单（用于职位说明书）
    isShowRenderTemplate?: boolean; // 是否显示第二层的基础信息控件
  }>(),
  {
    isShowRenderTemplate: true
  }
);
const menuKey = ref(['1']);
const menuSelected = ref('1');
const visible = ref(false); // 显示弹框

// 显示全屏弹框
const fullScreen = () => {
  visible.value = true;
};
// 关闭弹窗
const back = () => {
  visible.value = false;
  menuSelected.value = '1';
  menuKey.value = ['1'];
  props.back();
};
// 保存
const save = async () => {
  // console.log('props.template', props.template);
  //保存表单
  const res = await props.refForm.validate();
  if (res) return;
  await emit('saveForm');
  // let state = 0;
  // state = await props.save();
  // if (state === 2) return;
  visible.value = false;
  menuSelected.value = '1';
  menuKey.value = ['1'];
};
// 点击标签
const changeMenu = async (e: string) => {
  const res = await props.refForm.validate();
  if (res) {
    menuKey.value = [`1`];
    return;
  } else {
    menuKey.value = [`${e}`];
    menuSelected.value = e;
  }
};

// 暴露方法给父组件
defineExpose({ fullScreen, save });

const upshowData = (e: any) => {
  emit('upshowData', e);
};

const sortshowData = (e: any) => {
  emit('sortshowData', e);
};
const emit = defineEmits(['upshowData', 'sortshowData', 'saveForm']);
// 下一步
const onNext = async () => {
  const res = await props.refForm.validate();
  if (res) return;
  // await props.save();

  menuKey.value = ['2'];
  menuSelected.value = '2';
};

// 上一步
const onPrev = () => {
  menuSelected.value = Math.max(1, +menuSelected.value - 1) + '';
  menuKey.value = [`${menuSelected.value}`];
};
</script>
<style lang="less" scoped>
.header {
  display: flex;
  border-bottom: 1px solid #eee;
  align-items: center;
  background: #3d7eff;
  padding: 10px;
  .title {
    color: #fff;
    font-size: 16px;
  }
  .form-name {
    font-size: 18px;
  }

  // background: rgba(61, 126, 255, 1);
  // color: white;
  .menu {
    flex: 1;
    text-align: center;
    background: #3d7eff;
    height: 100%;

    &-item {
      display: flex;
      align-items: center;
      .icon {
        font-size: 18px;
      }
    }
  }
}

.content {
  height: 100vh;
  // padding: 20px;
  .main {
    height: 100%;
    // background: #fff;

    .base {
      background-color: #fff;
      height: 100%;
      :deep(.arco-form-item-label-col > .arco-form-item-label) {
        font-size: 16px;
      }
      &-form {
        position: relative;
        left: 50%;
        transform: translateX(-50%);
        width: 50%;
        margin-top: 20px;
        font-weight: 700;
      }
    }

    .print-set {
      display: flex;
      height: 100%;

      .form-check {
        width: 300px;
        background: white;
        height: 100%;
        margin: 16px 0;
        overflow: auto;

        .check-item {
          display: flex;
          justify-content: space-between;
          padding: 16px;
        }
      }

      .form {
        width: 700px;
        height: 1000px;
        overflow: auto;
        margin: 20px auto;
        padding: 16px;
        background: white;
      }
    }
    .from {
      // padding: 20px;
      // border: 20px solid #f3f3f3;
      height: 100%;
    }
  }
}
.btn {
  display: flex;
  width: 60%;
  height: 100px;
  margin: 50px auto;
}
:deep(.arco-menu-item) {
  height: 100%;
  background-color: #3d7eff;
  color: #fff !important;
}
:deep(.arco-menu-selected) {
  background-color: #165dff !important;
  color: #fff;
}
:deep(.arco-menu-item:hover) {
  background-color: #165dff !important;
}
:deep(.arco-menu-selected:hover) {
  background-color: #165dff !important;
}
:deep(.arco-menu-overflow-wrap) {
  flex: 0.9;
}
// .arco-menu-item {
//   height: 100%;
//   background-color: #3d7eff;
//   color: #fff !important;
// }
// .arco-menu-selected {
//   background-color: #165dff !important;
//   color: #fff;
// }
// .arco-menu-item:hover {
//   background-color: #165dff !important;
// }
// .arco-menu-selected:hover {
//   background-color: #165dff !important;
// }
:deep(.arco-modal-body) {
  padding: 0 !important;
}
::v-deep .arco-modal-body {
  padding: 0 !important;
}

.modal-footer {
  text-align: center;
}
</style>
